appcan.define("layer", function($, exports, module) {
    var modelLayer = '<div></div>';
    var layerTemplate = appcan.view.template(modelLayer);

    function LayerView(options) {
        appcan.extend(this, appcan.eventEmitter);
        var self = this;
        var width = Math.max(document.documentElement.getBoundingClientRect().width, window.innerWidth);
        var height = Math.max(document.documentElement.getBoundingClientRect().height, window.innerHeight);
        self.options = $.extend({
            selector : undefined,
            totalWidth : width,
            totalHeight : height,
            height : height * 0.6,
            autoClose : true
        }, options, true);

        self.container = $(document.body);
        appcan.button(self.options.selector, "btn-act", function() {
            self.show();
        });

        var overlayer = $(document.createElement('div'));
        overlayer.addClass('ly-OverLayer uhide');
        var poplayer = $(document.createElement('div'));
        poplayer.addClass('ly-PopLayer');
        self.overlayer = overlayer;
        self.poplayer = poplayer;

        self.init();
    };

    LayerView.prototype = {
        init : function() {
            var self = this;

            $(self.container).append(self.overlayer);
            self.overlayer.append(self.poplayer);
            self.overlayer.css({
                height : self.options.totalHeight,
                background : 'rgba(0, 0, 0, 0.5)'
            });
            self.popHeight = self.options.height || self.options.totalHeight * 0.6;
            self.poplayer.css({
                height : self.popHeight,
                bottom : 0,
                position : 'absolute',
                width : self.options.totalWidth,
                background : '#fff'
            });
            self.bindEvent();
        },
        show : function() {
            var self = this;
            self.overlayer.removeClass("uhide");
        },
        bindEvent : function() {
            var self = this;
            //autoClose->点击overlayer关闭
            if (self.options.autoClose) {
                self.overlayer.click(function(e) {
                    self.close();
                    self.options.fallback && self.options.fallback();
                })
            }

            self.poplayer.click(function(e) {
                e.stopPropagation();
            });

            var sureBtn = $('.sure', self.overlayer);
            var closeBtn = $('.close', self.overlayer);
            sureBtn.click(function(e) {
                if (!self.options.callback || self.options.callback())
                    self.close();
            });
            closeBtn.click(function(e) {
                self.options.fallback && self.options.fallback();
                self.close();
            });
        },
        close : function() {
            var self = this;
            if (self.overlayer) {
                if (self.options.showAnimate) {
                    self.overlayer.addClass('fadeOutDown');
                    setTimeout(function() {
                        self.hide();
                    }, 200);
                } else {
                    self.hide();
                }
            }
        },
        hide : function() {
            this.overlayer.addClass("uhide");
        }
    }
    module.exports = function(options) {
        return new LayerView(options);
    };
});
